<template>
  <view class="box" :style="{ backgroundImage: 'url(' + bgimg + ')' }">
    <view class="flex top_list">
      <view class="flex1 suanli_name"
        >{{
          locale == "zh_CN" ? suanli.goods_info.name : suanli.goods_info.name_en
        }}
        {{ suanli.goods_info.days }}{{ $t("mf.suanlibao.day") }}</view
      >
      <button
        class="back_btn"
        @tap.stop="backSuanli(suanli.id, suanli.pay_num)"
        :disabled="suanli.state == -1"
      >
        {{ $t("mf.suanlibao.back") }}
      </button>
    </view>
    <view class="flex">
      <view class="flex1">
        <view class="top_name">{{ $t("mf.suanlibao.amount") }}</view>
        <view class="bot_data"
          >{{ suanli.pay_num }}<text style="font-size: 28rpx">FIL</text></view
        >
      </view>
      <view class="flex1">
        <view class="top_name">{{ $t("mf.suanlibao.total_profit") }}</view>
        <view class="bot_data">+{{ suanli.reward_total }}</view>
      </view>
      <view class="flex1">
        <view class="top_name">{{ $t("mf.suanlibao.end_day") }}</view>
        <view class="bot_data"
          >{{ suanli.days - suanli.release_days
          }}{{ $t("mf.suanlibao.day") }}</view
        >
      </view>
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  props: {
    suanli: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    bgimg() {
      // let num = this.suanli.id % 3;
      let num = 1;
      return `/static/mf/shop/suanli${num}.png`;
    },
    ...mapGetters("system", ["locale"]),
  },
  methods: {
    backSuanli(id, num) {
      this.$emit("backSuanli", { id, num });
    },
  },
  created() {
    console.log(this.suanli);
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 320rpx;
  border-radius: 20rpx;
  margin-bottom: 30rpx;
  padding: 40rpx;
  box-sizing: border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.suanli_name {
  height: 56rpx;
  font-size: 40rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  line-height: 56rpx;
}
.top_list {
  align-items: center;
}
.back_btn {
  width: 160rpx;
  height: 62rpx;
  background: #ff9d45;
  box-shadow: 0px 4px 0px 0px #e68935;
  border-radius: 10rpx;
  line-height: 64rpx;
  font-size: 30rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
  box-sizing: border-box;
  margin-bottom: 60rpx;
}
.top_name {
  height: 40rpx;
  font-size: 28rpx;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  line-height: 40rpx;
  margin-bottom: 20rpx;
  text-align: center;
}
.bot_data {
  height: 59rpx;
  font-size: 42rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  color: #ffffff;
  line-height: 59rpx;
  text-align: center;
}
</style>